class Swiper {
    constructor(obj, options) {
        //获取DOM
        this.container = this.getDom(obj.container);
        this.waper = this.getDom(obj.waper);
        this.pagination = this.getDom(obj.pagination);
        this.prev = this.getDom(obj.prev);
        this.next = this.getDom(obj.next);
        this.olist = Array.from(this.waper.children);
        this.tirme = null;

        this.num = 0;
        console.log(this.olist)



        this.default = {
            init: 0,
            autoplay: 1500,
            direction: 'horizontal'
        }
        this.options = Object.assign({}, this.default, options)


        this.init();
    }

    //函数总调头
    init() {
        this.bindEvent()
        this.creatEvet()
        this.clickEvent()
        this.mouseEvent()
    }


    //封装
    getDom(ele, parent) {
        return typeof ele === 'object' ? ele : (parent || document).querySelectorAll(ele)[0]
    }

    //事件开始
    bindEvent() {
        this.width = this.container.offsetWidth;
        this.height = this.container.offsetHeight;
        this.len = this.olist.length;
        if (this.options.direction === 'horizontal') {
            this.waper.style.width = `${this.len * this.width}px`
            this.waper.style.height = `${this.height}px`
            this.olist.forEach((item) => {
                item.style.float = 'left';
            })
        } else {
            this.waper.style.width = `${this.width}px`
            this.waper.style.height = `${this.len * this.height}px`
            this.olist.forEach((item) => {
                item.style.float = 'none';
            })
        }
    }

    creatEvet() {
        var uli = '';
        this.olist.forEach((item, ind) => {
            item.style.width = `${this.width}px`;
            item.style.height = `${this.height}px`
            uli += `<li></li>`
        })
        this.pagination.innerHTML = uli;

        this.ullis = this.pagination.children;
        this.ullis[0].className = 'current'

        for (let k = 0; k < this.ullis.length; k++) {

            this.ullis[k].onclick = () => {
                this.options.init = k;
                for (let j = 0; j < this.ullis.length; j++) {
                    this.ullis[j].classList.remove('current');
                }
                this.ullis[k].classList.add('current');
                this.move()
            }
        }
    }


    clickEvent() {
        this.prev.onclick = () => {
            this.options.init--;
            this.options.init = this.options.init < 0 ? this.len - 1 : this.options.init;
            console.log(this.options.init * this.width)
            this.move()
        }
        this.next.onclick = () => {
            this.options.init++;
            this.options.init = this.options.init > this.len - 1 ? 0 : this.options.init;
            console.log(this.options.init * this.width)
            this.move()
        }

        this.tirme = setInterval(() => { this.next.onclick() }, this.options.autoplay)
    }

    move() {
        let sty = this.options.direction === 'horizontal' ? 'marginLeft' : 'marginTop';
        let stycss = this.options.direction === 'horizontal' ? 'width' : 'height';
        console.log(sty)
        console.log(stycss)
        this.waper.style[sty] = `-${this.options.init * this.width}px`
        for (let g = 0; g < this.ullis.length; g++) {
            this.ullis[g].classList.remove('current');
        }
        this.ullis[this.options.init].classList.add('current');
        this.waper.style.transition = 'all .3s';
    }




    //小事件
    mouseEvent() {
        this.container.onmouseenter = () => {
            this.prev.style.display = 'block';
            this.next.style.display = 'block';
            clearInterval(this.tirme)
        }
        this.container.onmouseleave = () => {
            this.prev.style.display = 'none';
            this.next.style.display = 'none';
            this.tirme = setInterval(() => { this.next.onclick() }, this.options.autoplay)
        }

    }
}